<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>留言板</title>

    <style>
        body, ul {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        /*最外层*/
        .wrap {
            width: 600px;
            height: 165px;
            margin: 20px auto;
            border-radius: 4px;
            border: 1px solid #ddd;
            padding: 0 10px;
        }

        .wrap-head {
            width: 100%;
            height: 24px;
            padding-top: 4px;
            overflow: hidden;
        }

        .head-logo {
            width: 40%;
            float: left;
        }

        .head-logo img {
            width: 30px;
            height: 30px;
        }

        .head-txt {
            padding: 4px 0;
            width: 60%;
            float: right;
        }

        .head-txt a {
            font-size: 12px;
            color: #eb7350;
            text-decoration: none;
        }
        .title-txt.title {
            text-align: right;
            color: black;
            display: block;
            width: 100%;
        }


        /*内层设计，输入框*/
        .main-txt {
            border: 1px solid #ccc;
            width: 98%;
            height: 68px;
            margin: 4px 0 0;
            padding: 5px;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15) inset;
        }

        .main-txt textarea {
            border: none;
            width: 100%;
            height: 66px;
            outline: none;
            resize: none;
            color: #333;
        }
        .main-txt.outline {
            outline: 2px orange solid;
        }

        /*下层设计*/
        .warp-footer {
            width: 100%;
            height: 40px;
            margin: 6px 0;
            overflow: hidden;
        }

        .warp-icon-cont {
            width: 65%;
            float: left;
            margin-top: 10px;
        }

        .warp-icon-cont ul li {
            display: inline-block;
            margin-right: 15px;
            cursor: pointer;
        }

        .warp-icon-cont a {
            font-size: 12px;
            color: #333;
            text-decoration: none;
            height: 20px;
            margin-left: 5px;
            display: block;
            width: 25px;
            float: right;
            line-height: 20px;
        }

        .warp-icon-cont a:hover {
            color: #eb7350;
        }

        .warp-icon-cont img {
            width: 20px;
            height: 20px;
        }

        .warp-footer-btns {
            width: 35%;
            float: right;
            overflow: hidden;
            margin-top: 3px;
        }

        .release-btn {
            width: 80px;
            height: 28px;
            float: right;
            background-color: #ffc09f;
            border: 4px solid #fbbd9e;
            cursor: pointer;
            border-radius: 2px;
        }

        .release-btn a {
            display: block;
            color: #fff;
            width: 80px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            text-decoration: none;
            font-size: 15px;
        }

        /*后期添加的留言框*/
        .show {
            width: 600px;
            margin: 20px auto;
        }

        .show-content {
            width: 578px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }

        .show-name {
            width: 100%;
            text-align: left;
            font-size: 14px;
            color: #333;
            font-weight: bold;
        }

        .show-txt {
            width: 100%;
            color: #444;
            font-size: 14px;
            margin-top: 10px;
        }

        .show-txt p {
            width: 100%;
            word-wrap: break-word;
        }

        .show-time {
            font-size: 12px;
            color: #808080;
            margin-top: 10px;
        }

        .show-close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            color: #ccc;
            cursor: pointer;
            transition: .5s;
        }

        .show-close:hover {
            color: red;
        }

    </style>
</head>
<body>
<!-- 发布留言的主体 -->
<div class="wrap">
    <div class="wrap-head">
        <div class="head-logo">
            <img src="../static/images/xx.jpg"/>
        </div>
        <div class="head-txt">
            <a class="title-txt" href="javascript:void(0)">置办年货省省省！红包在手年货无忧！点击领取年货红包   热门微博</a>
        </div>
    </div>

    <!--输入框-->
    <div class="main-txt">
        <textarea name="" rows="" cols="" class="main-area"></textarea>
    </div>

    <div class="warp-footer">
        <div class="warp-icon-cont">
            <ul>
                <li><img src="../static/images/xx.jpg" alt=""/>
                    <a href="javascript:void(0)">表情</a>
                </li>
                <li><img src="../static/images/xx.jpg" alt=""/>
                    <a href="javascript:void(0)">图片</a>
                </li>
                <li><img src="../static/images/xx.jpg" alt=""/>
                    <a href="javascript:void(0)">视频</a>
                </li>
                <li><img src="../static/images/xx.jpg" alt=""/>
                    <a href="javascript:void(0)">话题</a>
                </li>
                <li><img src="../static/images/xx.jpg" alt=""/>
                    <a href="javascript:void(0)">文章</a>
                </li>
            </ul>
        </div>

        <!--发布按钮-->
        <div class="warp-footer-btns">
            <div class="release-btn">
                <a href="javascript:void(0)">发布</a>
            </div>
        </div>
    </div>
</div>

<!-- 显示留言的主体 -->
<div class="show">
    <div class="show-content">
        <div class="show-name">Xx</div>
        <div class="show-txt">
            <p class="">这是内容</p>
        </div>
        <div class="show-time">2018年10月24日</div>
        <div class="show-close">x</div>
    </div>
</div>


<script type="application/javascript" src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
<script type="application/javascript">
    // 匿名函数包裹，防止外界操作的修改
    $(function () {
        //设置输入的最大字数
        var able_count = 140;
        //是否可以发布留言
        var release_able = false;
        //右上角文字
        var $titleTxt = $('.title-txt');
        //留言框
        var $mainArea = $('.main-area');
        //发布按钮
        var $releaseBtn = $('.release-btn');

        //输入框获取焦点
        $mainArea.focus(function () {
            console.log("获取焦点")
            $(this).parent().addClass('outline')

            $titleTxt.addClass('title');
            if (able_count >=0){
                $titleTxt.html('你还可以输入'+ able_count + '字');
            } else {
                $titleTxt.html('你已经超出' + -able_count + '字')
            }
        })

        //输入框失去焦点
        $mainArea.blur(function () {
            $(this).parent().removeClass('outline')
            $titleTxt.removeClass('title')

            $titleTxt.html('置办年货省省省！红包在手年货无忧！点击领取年货红包   热门微博')
        })

        //输入框文本修改
        $mainArea.on('input', function () {
            //根据文本输入计算右上角的字数
            var count = 140 - $mainArea.val().length;
            $titleTxt.html('你还可以输入'+ count + '字');

            //判断输入的字数是否在0到140之内,如果在可以发布
            if(count >0 && count <=140) {
                release_able = true;
                $releaseBtn.css({
                    backgroundColor: 'orange',
                    borderColor: 'orange'
                })
            } else {
                $titleTxt.html('你已经超出'+ (-count)+'字');
                release_able = false;
                $releaseBtn.css({
                    backgroundColor: '#ffc09f',
                    borderColor: '#ffc09f'
                })
            }
        })

        //发布事件
        $releaseBtn.click(function () {
            //当release_able为true的时候才可以发布
            if (release_able){
                // 创建show对象的各个部位
                var $show = $('.show');
                var $showContent = $('<div class="show-content"></div>');
                var $showName = $('<div class="show-name"></div>');
                var $showTxt = $(' <div class="show-txt"></div>');
                var $showTime = $('<div class="show-time"></div>');
                var $showClose = $('<div class="show-close"></div>');
                var $showP = $('<p class=""></p>');

                var date = new Date();

                //设置对象结构内容
                $showName.text('xx');
                $showP.text($mainArea.val());
                $showTime.text(date);
                $showClose.text('x');

                //添加进入主结构
                $showTxt.append($showP);
                $showContent.append($showName);
                $showContent.append($showTxt);
                $showContent.append($showTime);
                $showContent.append($showClose);

                //向所有匹配元素内部的开始处插入内容
                $show.prepend($showContent);
            }

            //发布后的处理
            $mainArea.val('');
            able_count = 140;
            release_able = false;

        })


    })

</script>

</body>
</html>
